<template>
  <el-row class="bg-cyan-500 min-h-screen">
    <el-col :span="24" class="flex items-center justify-center">
      <div
        class="bg-gray-50 items-center flex flex-col shadow-2xl min-w-[300px] min-h-[350px] rounded-lg"
      >
        <h2 class="font-bold text-3xl text-gray-800 mb-3 mt-3">登录</h2>
        <div
          class="flex items-center justify-center mb-6 text-gray-300 space-x-2"
        >
          <span class="h-[1px] w-16 bg-gray-200"></span>
          <span class="text-sm">账号密码登录</span>
          <span class="h-[1px] w-16 bg-gray-200"></span>
        </div>
        <el-form :model="from" class="w-[250px]">
          <el-form-item label="账号 :">
            <el-input
              v-model="from.username"
              placeholder="请输入账号"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码 :">
            <el-input
              v-model="from.password"
              type="password"
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" round color="#22d3ee" class="w-[250px]"
              >登录</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button color="#22d3ee" round class="w-[250px]" type="primary"
              >注册</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </el-col>
  </el-row>
</template>
 
<script setup>
// import { login } from "@/api/login";

import { reactive } from "vue";
const from = reactive({
  username: "",
  password: "",
});
</script>

<style>
</style>